<template>
  <div>
    <el-row :gutter="20" type="flex" align="middle" v-for="index of total" :key="index">
      <el-col :span="0.1">
        <el-radio v-if="questionForm.questionType == '1'" @change="value => optionBooleanchange(value, index)" v-model="optionSingle" :label="String.fromCharCode(64 + index)"></el-radio>
        <el-checkbox v-else v-model="optionDouble" @change="value => optionBooleanchange(value, index)" :label="String.fromCharCode(64 + index)"></el-checkbox>
      </el-col>
      <el-col :span="5"><el-input v-model="questionForm.options[index - 1].title" placeholder="请输入内容"></el-input> </el-col>
      <el-col :span="5">
        <question-img :index="index" @imgUrl="questionForm.options[index - 1].img = $event" :questionForm="questionForm" :paramsInput="paramsInput"></question-img>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="0.1"
        ><el-radio v-model="optionBoolean" label="1">B :</el-radio>
      </el-col>
      <el-col :span="5"
        ><el-input
          v-model="questionForm.options[1].code"
          placeholder="请输入内容"
        ></el-input>
      </el-col>
      <el-col :span="5"> </el-col>
    </el-row>
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="0.1"
        ><el-radio v-model="optionBoolean" label="2">C :</el-radio>
      </el-col>
      <el-col :span="5"
        ><el-input
          v-model="questionForm.options[2].code"
          placeholder="请输入内容"
        ></el-input>
      </el-col>
      <el-col :span="5"> </el-col>
    </el-row>
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="0.1"
        ><el-radio v-model="optionBoolean" label="3">D :</el-radio>
      </el-col>
      <el-col :span="5"
        ><el-input
          v-model="questionForm.options[3].code"
          placeholder="请输入内容"
        ></el-input>
      </el-col>
      <el-col :span="5"> </el-col>
    </el-row>
    <el-row
      :gutter="20"
      type="flex"
      align="middle"
      v-for="index of total"
      :key="index"
    >
      <el-col :span="0.1"
        ><el-radio v-model="optionBoolean" :label="indexchange">{{
          String.fromCharCode(ab)
        }}</el-radio>
      </el-col>
      <el-col :span="5"
        ><el-input
          v-model="questionForm.options[indexcc].code"
          placeholder="请输入内容"
        ></el-input>
      </el-col>
      <el-col :span="5"> </el-col>
    </el-row> -->
    <el-row :gutter="20">
      <el-col :span="5">
        <el-button type="info" size="small" :disabled="questionForm.questionType !== '2'" @click="forCircle">+添加选项与答案</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import QuestionImg from '../components/question-img'
export default {
  name: 'QuestionOption',
  props: {
    questionForm: {
      type: [Object],
      required: true
    },
    paramsInput: {
      type: [Object],
      required: true
    }
  },
  components: {
    QuestionImg
  },
  data() {
    return {
      optionSingle: '',
      optionDouble: [],
      total: 4,
      img: ''
    }
  },
  mounted() {},
  methods: {
    forCircle() {
      const optionsInfo = {
        code: String.fromCharCode(65 + this.total),
        title: '',
        img: '',
        isRight: false
      }
      this.questionForm.options.push(optionsInfo)
      this.total++
    },
    inputChange() {
      // 获取文件对象
      var file = this.$refs.inputFile[this.index].files[0]
      this.img = window.URL.createObjectURL(file)

      // this.updataAvatarShow = true
      // console.log(file)
      // this.$refs.inputFile.value = ''
    },
    handleclickBtn(index) {
      this.index = index
      this.$refs.inputFile[index].click()
    },
    optionBooleanchange(value, index) {
      console.log(value, index)
      if (this.questionForm.questionType == '1') {
        this.questionForm.options.some((item, cc) => {
          console.log(item)
          item.isRight = false
          if (cc == index - 1) {
            item.isRight = true
            return true
          }
        })
      } else {
        console.log(this.optionDouble)
        this.questionForm.options[index - 1].isRight = value
      }
    }
  },
  watch: {
    questionForm() {
      console.log(this.questionForm)
      if (this.paramsInput.type === 1) {
        if (this.questionForm.questionType === '1') {
          console.log(1)
          this.questionForm.options.some(item => {
            console.log('singgel' + item.isRight)
            if (item.isRight === 1) {
              return (this.optionSingle = item.code)
            }
          })
        } else if (this.questionForm.questionType === '2') {
          console.log(2)
          this.questionForm.options.forEach(item => {
            if (item.isRight === 1) {
              this.optionDouble.push(item.code)
            }
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 15px;
}
</style>
